<template>
	<view class="loading" v-if="loading">
		<view class="avatar"></view>
		<view class="loader">
		</view>
	</view>
	<view class="header" :style="'height:'+height+'rpx'">
		<view class="main">
			<view class="name">首页</view>
			<view class="search" :style="'width: calc(100% - '+search_width+'rpx)'">
				<rui-icon icon="search"></rui-icon>
				<input type="text" class="input" :style="'height:'+input_height+'rpx'" placeholder="搜索路线,景点">
			</view>
		</view>
	</view>
	<view class="container">
		<slot></slot>
	</view>
	<view class="footer">
		<slot name="footer"></slot>
	</view>
	<view class="exemption">


	</view>
</template>

<script setup>
	import {
		ref, computed
	} from "vue"
	defineProps({
		loading: {
			type: Boolean,
			default: false
		}
	})

	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	console.log(menuButtonInfo)
	
	const height = computed({
		get: () => menuButtonInfo.bottom * 2
	})
	
	const search_width = computed({
		get: () => menuButtonInfo.width * 2 + 200
	})
	
	const input_height = computed({
		get: () => menuButtonInfo.height * 2
	})
	
	
</script>

<style lang="scss">
	.header {
		.main {
			display: flex;
			align-items: center;
			background-color: #fff;
			height: 100%;
			position: relative;

			.name {
				position: absolute;
				bottom: 15rpx;
				left: 0;
				width: 150rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.search {
				display: flex;
				align-items: center;
				position: absolute;
				left: 150rpx;
				bottom: 10rpx;
				margin: auto;
				// width: 300rpx;
				border-radius: 30rpx;
				background: #e6ebef;
				// padding: 6rpx 20rpx;
				// height: 50rpx;

				.input {
					font-size: 24rpx;
				}
			}

		}
	}

	.loading {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #f4f6fa;
		z-index: 99999999;

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loader {
			border: 6rpx solid #fff;
			border-top: 6rpx solid #f00;
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			animation: spin 2s linear infinite;
			position: absolute;
			left: calc(50% - 50rpx);
			top: calc(50% - 50rpx);
		}

		.avatar {
			background: url('');
			width: 80rpx;
			height: 80rpx;
			background-size: cover;
			background-color: #f00;
			border-radius: 50%;
			position: absolute;
			left: calc(50% - 40rpx);
			top: calc(50% - 40rpx);
		}
	}

	.container {
		overflow: hidden;
	}

	.exemption {
		// font-size: 24rpx;
		// color: #666;
		// padding: 30rpx;
		// background: #eee;
		// margin-top: 40rpx;
	}
</style>